@import "demo";

/*  reset font family   */
.p_chinese{
    font-family: Arial,"Microsoft YaHei","Microsoft YaHei UI","微软雅黑",Helvetica,Tahoma,STXihei,"华文细黑",SimSun,"宋体",Heiti,"黑体",sans-serif;
    font-size: 16px;
}
.p_english{
    font-family: Vani, Arial,"Microsoft YaHei","Microsoft YaHei UI","微软雅黑",Helvetica,Tahoma,STXihei,"华文细黑",SimSun,"宋体",Heiti,"黑体",sans-serif;
    font-size: 14px;
}
/*  fault   */ 
.icon-arrow-right{
    font-size: 20px;
    color: #828181;
} 


/*  main part   */
.main{
    // @include box_mod(inherit, auto,#e7e9ec);
    width: inherit;
    background-color: #e7e9ec;
    background-image:url("../img/show_bg_1280x735.png");
    background-repeat: no-repeat;  
    background-position: 0 0;
    background-size: 100% 552px;
    box-sizing: border-box;
    padding-top: 59px;
    padding-left: 149px;

    .left_bar{
        // @extend .side_bar;
        /*  side bar    */
        @include box_mod(224px, 323px,#f3f2f2);
        @include recode_inline_block;
        box-sizing: border-box;
        padding-top: 27px;
        font-size: 0;

        .tag{
            @include box_mod(inherit, 30px);
            @include recode_inline_block;
            margin-bottom: 10px;
            cursor: pointer;
            .tag_icon{
                @include box_mod(30px, 30px);
                @include recode_inline_block;
                box-sizing: border-box;
                margin-left: 7px;
                padding-top: 5px;
                padding-left: 10px;
                padding-bottom: 5px;
            }
            p{
                display: inline-block;
                line-height: 30px;
                color: #7c7979;
            }
            .p_chinese{
                margin-right: 6px;
            }
        }
        .bar_tel_area{
            @include box_mod(inherit, 40px);
            overflow: hidden;
            margin-top: 40px;
            text-align: center;
            .pic_tel{
                @include box_mod(16px, 16px);
                @include recode_inline_block;
                .icon-phone{
                    color: #7c7c7c;
                }
            }
            .num_tel{
                @include box_mod(120px, inherit);
                @include recode_inline_block;
                margin-left: 5px;
                p{
                    text-align: left;
                    font-size: 12px;
                    line-height: 20px;
                    font-family: Arial,"Microsoft YaHei","Microsoft YaHei UI","微软雅黑",Helvetica,Tahoma,STXihei,"华文细黑",SimSun,"宋体",Heiti,"黑体",sans-serif;
                    color: #7c7c7c;
                }
            }
        }


        .tag:hover{
            background-color: #58636d;
        }
        .tag:hover>p{
            color: white;
        }
        .tag:hover>.tag_icon>.iconfont{
            color: white;
        }
    }
    /*  main_right : height should not be limited.*/ 
    .main_right{
        width: 681px;
        @include recode_inline_block;
        margin-left: 44px;
        margin-bottom: 103px;

        .main_box{
             @include box_mod(inherit, inherit,white);
             box-sizing: border-box;
             padding: 50px 11px 0 13px;
            //  .main_header+.main_area*3+.main_footer
            .main_header{
                @include box_mod(602px,21px);
                margin: 0 auto 0 auto;
                p{  
                    width: 70%;
                    @include nowrap_p;
                    font-size: 14px;
                    line-height: 20px;

                }
                P:last-child{
                    width: 25%;
                    font-family: Arial,"Microsoft YaHei","Microsoft YaHei UI","微软雅黑",Helvetica,Tahoma,STXihei,"华文细黑",SimSun,"宋体",Heiti,"黑体",sans-serif;
                }
            }
            .main_title{
                // height: 105px;
                box-sizing: border-box;
                border-top: 1px solid #c4c4c5;
                text-align: center;
                padding-top: 45px;
                padding-bottom: 36px;
                p{
                    @extend .p_chinese;
                    font-size: 28px;
                    color: #4b4b4b;
                }

            }
            .main_area{
                @include box_mod(652px, auto);
                margin-bottom: 38px;

                .m_a_title{
                    text-align: left;
                    @include box_mod(inherit, 22px);
                    cursor: pointer;
                    p{
                        padding-left: 10px;
                        @extend .p_chinese;
                        font-size: 18px;
                        font-weight: bolder;
                        line-height: 20px;
                    }

                    &:hover{
                        p{
                            color: #3498db;
                        }
                    }

                }
                .m_a_photo{
                    width: 652px;
                    overflow: hidden;
                    margin-top: 15px;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                .m_a_text{
                    margin-top: 31px;
                    width: inherit;
                    p{
                        @extend .p_chinese;
                        font-size: 14px;
                        line-height: 24px;
                        color: #6b6c6d;
                        text-indent: 2em;
                        text-align: justify;
                    }
                }  
                .p_photo_detail{
                    text-align: center;
                    p{
                        @extend .p_chinese;
                        font-size: 12px;
                        font-family: Arial,"Microsoft YaHei","Microsoft YaHei UI","微软雅黑",Helvetica,Tahoma,STXihei,"华文细黑",SimSun,"宋体",Heiti,"黑体",sans-serif;
                    }
                }    
            }
            .main_area:last-child{
                margin-bottom: 0;
            }
        }
    }
}